<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>充值</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <!-- <link rel="shortcut icon" href="http://favicon.ico"> -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">

    <!--<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">-->

    <!-- 固定的css 和 common.js 的引用    -->
    <link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm.min.css">
		<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/sm-extend.min.css">
		<link rel="stylesheet" href="http://47.104.254.28/commonfile/css/common.css">
		<script type="text/javascript" src="http://47.104.254.28/commonfile/common/common/common.js"></script>
		<!-- <script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/vconsole.min.js"></script>
		<script>
			var vConsole = new VConsole();
		</script> -->
    
<style type="text/css">
  /*css 的样式都放在这里*/
 	/*背景色*/
 	#MyContent_top-up_first,#MyContent_top-up_second{
 		background-color: white;
 	}
 	/*屏幕占比*/
 	#MyContent_top-up_first #LAN{
 		width: 94%;
 		margin-left: 3%;
 		margin-top: 5px;
 	}
 	#MyContent_top-up_second #LAN{
 		width: 94%;
 		margin-left: 3%;
 		margin-top: 5px;
 	}
 	#tishi #LAN{
 		width: 94%;
 		margin-left: 3%;
 		margin-top: 5px;
 		color: #FF6A49;
 	}
 	/*充值边框*/
 	#chongzhi_div{
 		padding-top: 15px;
 		padding-bottom: 10px;
 	}
 	/*充值边框*/
 	#MyContent_top-up_first{
 		padding-bottom: 20px;
 	}
 	/*学习卡充值边框*/
 	#MyContent_top-up_second #LAN{
 		padding-top: 12px;
 		padding-bottom: 12px;
 	}
 	/*input位置*/
 	#MyContent_top-up_second input{
 		float: right;
 		width: 65%;
 	}
 	/*table样式*/
	table{
		width: 100%;
	}
  	td{
  		height: 60px;
  		width: 30%;		
  	}
  	/*调整两个tr间距的tr*/
  	#tiaozhengjianju{
  		height: 5px;
  	}
  	/*充值背景*/
  	#MyContent_top-up_first table td div{
  		width: 95%;
  		padding-bottom:15% ;
  		padding-top:15%  ; 		
  		text-align: center;
  		/*background-image: url(../img/xiaotubiao/619529103257494659.png);*/
  		background-image: url(http://47.104.254.28/commonfile/img/img/img_green_border.png);
  		background-size: 100% 100%;
  		background-repeat: no-repeat;
  		/*border: solid 1px blue;*/
  		/*border-radius: 4px;*/
  		
  	}
  	#MyContent_top-up_first table td #one{
  		float: left; 		
  	}
  	#MyContent_top-up_first table td #two{
  		margin: 0 auto;
  	}
  	#MyContent_top-up_first table td #three{
  		float: right;
  	}
  	
  	/*input样式*/
  	#MyContent_top-up_second input{
  		border: 1px;
  		border-style: solid;
  		border-color: gainsboro;
  		/*border-radius: 4px;*/
  	}
  	
  	/*充值样式*/
  	#top_up{
  		background-color: #55E9D0;
  		border-radius: 4px;
  		padding-bottom: 10px;
  		padding-top: 10px;
  		text-align: center;
  		margin-left: 20%;
  		margin-right: 20%;
  		margin-top: 30px;
  		color: white;
  	}
</style>


</head>
<body>
<div class="page-group">
    <div class="page page-current">
       
        <!-- html代码内容区域 -->
		<div id="MyContent_top-up">
			<div id="MyContent_top-up_first">
				<div id="LAN">
					<div id="chongzhi_div">
						<span id="">
							充值
						</span>
					</div>
					<div id="">
						<!--border="" cellspacing="" cellpadding=""-->
						<table >
							<tr id="first_chongzhi">
								<td><div id="one" class="chongzhi_beijing" onclick="chongzhi(this)" chongzhi="30"><span>充值&nbsp;30</span></div></td>								
								<td><div id="two" class="chongzhi_beijing" onclick="chongzhi(this)" chongzhi="50"><span>充值&nbsp;50</span></div></td>
								<td><div id="three" class="chongzhi_beijing" onclick="chongzhi(this)" chongzhi="100"><span>充值&nbsp;100</span></div></td>
							</tr>
							<tr id="tiaozhengjianju"></tr>
							<tr id="second_chongzhi">
								<td><div id="one" class="chongzhi_beijing" onclick="chongzhi(this)" chongzhi="300"><span>充值&nbsp;300</span></div></td>
								<td><div id="two" class="chongzhi_beijing" onclick="chongzhi(this)" chongzhi="500"><span>充值&nbsp;500</span></div></td>
								<td><div id="three" class="chongzhi_beijing" onclick="chongzhi(this)" chongzhi="1000"><span>充值&nbsp;1000</span></div></td>
							</tr>
						</table>
					</div>
					</div>
				</div>
			</div>
			<div id="MyContent_top-up_second">
				<div id="LAN">
					<span id="">
						学习卡充值
					</span>
					<!--input内只能是数字和英文字母-->
					<input id="input_val" onfocus="jiaodian()" onkeyup="value=value.replace(/[\W]/g,'') " onbeforepaste="clipboardData.setData('text',clipboardData.getData('text').replace(/[^\d]/g,''))">
				</div>
			</div>
			<div id="tishi">
				<div id="LAN">
					* 充值与学习卡充值只能选择一项进行充值
				</div>
			</div>
			<div id="">
				<div id="top_up" onclick="confirm_top_up()">确认充值</div>
			</div>
		</div>
		
		
    </div>
</div>





<!-- 固定的js引用，所有的jQuery 要用 $$ 表示 -->
<script type="text/javascript" src="http://47.104.254.28/commonfile/js/js/jquery-1.11.1.min.js"></script>
<!-- 这一行代码是为了 避免js冲突 -->
<script type="text/javascript">var $$ =jQuery.noConflict();</script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/zepto/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='http://47.104.254.28/commonfile/js/js/sm-extend.min.js' charset='utf-8'></script>


<script type="text/javascript">
// 函数区域，函数放在“初始化区域的上面”
//	充值码
	var code;
	var top_up_money="";
	function chongzhi(custhis){
//		$$(".chongzhi_beijing").css("background-image","url(../img/xiaotubiao/619529103257494659.png)");
//		$$(custhis).css("background-image","url(../img/xiaotubiao/270580309574475711.png)");
//		console.log(top_up_money);
		var top_up_money_ti = top_up_money;
		if(isNotNull(top_up_money_ti)){
//			chongzhika_chongzhi();
//			console.log(top_up_money);
			var chongzhi_attr = $$(custhis).attr("chongzhi");
			if(chongzhi_attr==top_up_money_ti){
				$$(custhis).css("background-image","url(http://47.104.254.28/commonfile/img/img/img_green_border.png)");
				top_up_money="";
			}
			if(chongzhi_attr!=top_up_money_ti){
				$$(".chongzhi_beijing").css("background-image","url(http://47.104.254.28/commonfile/img/img/img_green_border.png)");
				$$(custhis).css("background-image","url(http://47.104.254.28/commonfile/img/img/img_green_border_check.png)");
    
				top_up_money = $$(custhis).attr("chongzhi");
			}
		}
		if(top_up_money_ti==""){
			$$(".chongzhi_beijing").css("background-image","url(http://47.104.254.28/commonfile/img/img/img_green_border.png)");
			$$(custhis).css("background-image","url(http://47.104.254.28/commonfile/img/img/img_green_border_check.png)");
    
			top_up_money = $$(custhis).attr("chongzhi");
//			console.log(top_up_money);
		}
//		console.log(top_up_money);
		$$("#input_val").val("");
//		console.log(listen);
		if(isNotNull(listen)){
//			console.log("aa");
			listen = "1";
		}
	}
	function chongzhika_chongzhi(){
//		console.log("ddf")
		$$(".chongzhi_beijing").css("background-image","url(http://47.104.254.28/commonfile/img/img/img_green_border.png)");
		top_up_money="";
	}
	
	function saveMoney(code){
// 		data需要转成json调用 ，函数urlParamParseJson();
//	    var jsonData = urlParamParseJson(data);
//		console.log("aa");
//		console.log(code);
	  	var params = {
	   		user_id : curuserid,
	   		code : code
	   	}
		net_request('post','api/v1/userLearnCard',params,successCallBack,errorCallBack);
	}


//	成功的回调函数
  	function successCallBack(data){
			console.log(data)
      	if(isNotNull(data)){
        	if(data.success==true){
          		if(isNotNull(data)){
          			if(isNotNull(data.data)){
          				$.toast('充值成功', 2000);
          				$$("#input_val").val("");
          			}
          			else{
          				$.toast(data.message, 3000);
          				$$("#input_val").val("");
          			}
          			
          		}
        	} else {
						$.toast(data.message, 3000);
						$$("#input_val").val("");
					}
      	}
 	}
//  失败的回调函数
  	function errorCallBack(data){
    	console.log(data);
//  	$.toast('请输入有效的激活码', 3000);
  	}
	
	
	
//	确认充值链接
	function confirm_top_up(){
//		console.log($$("#input_val").val());
		code = $$("#input_val").val();
//		学习卡激活码
		if(isNotNull(code)){
//			console.log()
			saveMoney(code);
		}
//		充值金额
		else if(isNotNull(top_up_money)){//本地充值
			//console.log(top_up_money);


			native_goto('local/chongzhi_querenchongzhi?amount='+top_up_money);


		}
		else{
			$.toast('请输入充值金额或填写学习卡激活码', 2000);
		}

		
//		native_goto('local/chongzhi_querenchongzhi');
	}
	 
	var listen = "";
	function jiaodian(){
		console.log(listen);
		if(listen==""){
			listen = "1";
		}
//		var input_val =  $$("#input_val").val();
//		console.log(input_val);
	}
	$$('#input_val').bind('input propertychange', function() {  
	    if(listen=="1"){
	    	chongzhika_chongzhi();
	    	listen = "2";
		}
	});  
	
   // 初始化区域
   	$$(function () {
//		getParams();

      	$.init();
   	});

    
</script>
</body>
</html>